<template>
  <div class="search-suggestion">
   <van-cell v-for="(text,index) in Suggestions"
   :key="index"
    @click="$emit('search',text)"
   icon="search">
  <div slot="title" v-html="highlight(text)"></div>
  </van-cell>

  </div>
</template>

<script>
import { getSearchSuggestion } from '@/api/search'
// 按需加载
import { debounce } from 'lodash'
export default {
  name: 'SearchSuggestion',
  props: {
    searchText: {
      type: String,
      require: true
    }
  },
  data () {
    return {
      Suggestions: []

    }
  },
  watch: {
    searchText: {
    // 当searchText发生改变，调用这个函数
      // handler (value) {
      //   this.loadSearchSuggestion(value)
      // },
      // 搜索框防抖
      handler: debounce(function (value) {
        this.loadSearchSuggestion(value)
      }, 500),
      immediate: true
    }
  },
  methods: {
    async loadSearchSuggestion (q) {
      try {
        const { data } = await getSearchSuggestion(q)
        this.Suggestions = data.data.options
      } catch (error) {
        this.$toast('数据获取失败，请稍后再试')
      }
    },
    highlight (text) {
      const reg = new RegExp(this.searchText, 'gi')
      const highlightstr = `<span style="color:#3296fa;">${this.searchText}</span>`
      // 正则表达式，动态创建正则表达式 要手动newRegExp
      // 参数一：匹配模式字符串，他会根据这个字符串创建正则表达式
      // 参数二：匹配模式，要写到字符串中
      return text.replace(reg, highlightstr) // 此处控制台会报读取为空的错误，正常现象，因为后端只要输入两个字母，返回的就是null，所以属于接口问题，不属于自己的错误
    }
  }
}

</script>

<style lang="less" scoped>

</style>
